<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>学习体验_实战课程</title>
    <link rel="stylesheet" href="css/animate.min.css" type="text/css" />
    <link type="image/x-icon" rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="css/index-llf.css" type="text/css" />
    <link type="text/css" rel="stylesheet" href="css/lrtk.css"/>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="js/wow.min.js"></script>
</head>
<body>
<div id="product_header">
    <header id="headernav" class="headernav wow fadeInDown" data-wow-duration="2s">
        <div class="normal_logo l">
            <a href="index.html" class="plogo">慕课网实战课程</a>
        </div>
        <div class="r item">
            <a href="sz.html">实战课程</a>
            <a href="student.html" class="active">学习体验</a>
            <a href="zg_index.html">WebIDE</a>
            <a href="/product/git">Git版本管理</a>
            <a href="cloud.html">云端服务</a>
            <a href="/product/service">在线答疑</a>
            <a href="/" class="btn_start">开始学习</a>
        </div>
        <div class="r productfit">
            <span class="js-icon-click"><i class="sz-list"></i></span>
            <a href="/" class="btn_start">开始学习</a>

            <div class="nav-list" style="display:none;">
                <div class="arrow-up"></div>
                <ul>
                    <li><a href="/product/">实战课程</a></li>
                    <li><a href="/product/experience" class="active">学习体验</a></li>
                    <li><a href="/product/webide">WebIDE</a></li>
                    <li><a href="/product/git">Git版本管理</a></li>
                    <li><a href="/product/cloud">云端服务</a></li>
                </ul>
            </div>
        </div>
    </header>
</div>


<section class="page1 wow fadeIn" data-wow-duration="1s" >
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-duration="1s" >个性化的界面设计，提升你的学习体验</h2>
        <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s">一个界面承载你所有学习过程，课程与开发环境结合；创新式的学习方式，转变你在本地学习理念</p>
    </div>
</section>
<section class="page2 wow fadeIn" data-wow-duration="1s" >
    <div class="container">
        <div class="icon-2 wow slideInDown" data-wow-duration="1s" >
            <h2 class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">左视频右代码，区域大小随意拖拽</h2>
            <div class="icon-line1 wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.3s"></div>
            <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1.8s">随意操作你的学习界面，符合你个性化的学习习惯</p>
            <div class="icon-1 wow shake" data-wow-offset="100" data-wow-iteration="infinite" data-wow-duration="1s" data-wow-delay="1s"></div>
        </div>
    </div>
</section>
<section class="page3 wow fadeIn" data-wow-duration="1s" >
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-duration="1s" >拆分WebIDE学习窗口</h2>
        <div class="icon-line2 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
        <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">适应双屏多屏用户，代码使用区域更大更简便</p>
        <div class="icon-1 wow zoomIn" data-wow-duration=".5s"></div>

    </div>
</section>
<section class="page4">
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-duration="1s" >学习中随意发问题写笔记</h2>
        <div class="icon-line1 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
        <div class="icon-1 wow fadeIn" data-wow-duration="1s" ></div>
        <div class="icon-2 wow rotateIn" data-wow-duration="1s" data-wow-delay=".5s"></div>
        <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">一击触发问题与笔记，随意切换，无须离开学习环境</p>

    </div>
</section>
<section class="page5 wow fadeIn" data-wow-duration="1s" >
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-duration="1s" >课程内容多类型，灵活展现</h2>
        <div class="icon-line1 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
        <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">新颖的学习方式使课程内容不再单一，更有任务，测试，习题与你互动</p>
    </div>
</section>
<section class="page6 wow fadeIn" data-wow-duration="1s">
    <div class="container">
        <h2 class="wow fadeInUp" data-wow-duration="1s">暗色系风格设计，保护你的眼睛</h2>
        <div class="icon-line1 wow fadeInUp" data-wow-duration="1s" data-wow-delay=".5s"></div>
        <p class="wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">对学习者，采用暗色系设计风格，无强光刺激，无论白天黑夜都能长时间学习，眼睛不疲惫</p>
        <div class="icon-1 wow zoomIn" data-wow-duration="1s" ></div>

    </div>
</section>
<section style="text-align: center;">
    <div class="page-btn">
        <a href="zg_index.html">继续了解WebIDE</a>
    </div>
</section>
<div id="footer">
    <div class="waper">
        <div class="footerwaper clearfix">
            <div class="followus r">
                <a class="followus-weixin" href="javascript:;"  target="_blank" title="微信">
                    <div class="flw-weixin-box"></div>
                </a>
                <a class="followus-weibo" href="http://weibo.com/u/3306361973"  target="_blank" title="新浪微博"></a>
                <a class="followus-qzone" href="http://user.qzone.qq.com/1059809142/" target="_blank" title="QQ空间"></a>
            </div>
            <div class="footer_intro l">
                <div class="footer_link">
                    <ul>
                        <li><a href="http://www.imooc.com/" target="_blank">网站首页</a></li>
                        <li><a href="http://www.imooc.com/about/job" target="_blank">人才招聘</a></li>
                        <li> <a href="http://www.imooc.com/about/contact" target="_blank">联系我们</a></li>
                        <li><a href="http://daxue.imooc.com/" target="_blank">高校联盟</a></li>
                        <li><a href="http://www.imooc.com/about/us" target="_blank">关于我们</a></li>
                        <li> <a href="http://www.imooc.com/about/recruit" target="_blank">讲师招募</a></li>
                        <li> <a href="http://www.imooc.com/user/feedback" target="_blank">意见反馈</a></li>
                        <li> <a href="http://www.imooc.com/about/friendly" target="_blank">友情链接</a></li>
                    </ul>
                </div>
                <p>Copyright © 2015 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>
            </div>
        </div>
    </div>
</div>

<!-- 返回顶部小火箭 -->
<div class="actGotop"><a href="javascript:;" title="Top"></a></div>

<script>
    wow = new WOW({
        boxClass:     'wow',      // default
        animateClass: 'animated', // default
        offset:       0,          // default
        mobile:       true,       // default
        live:         true        // default
    })
    wow.init();
    $(window).scroll(function() {
        if($(window).scrollTop()>=100){
            $("#headernav").addClass("scrollheadernav");
            $("#headernav").removeClass("headernav");
        }else{
            $("#headernav").addClass("headernav");
            $("#headernav").removeClass("scrollheadernav");
        }
    });

    $(".js-icon-click").on("click", function(e){
        $(".nav-list").show();

        $(document).one("click", function(){
            $(".nav-list").hide();
        });

        e.stopPropagation();
    });
    $(".nav-list").on("click", function(e){
        e.stopPropagation();
    });

    // 返回顶部小火箭
    $(window).scroll(function() {
        if($(window).scrollTop() >= 100){ //向下滚动像素大于这个值时，即出现小火箭~
            $('.actGotop').fadeIn(300); //火箭淡入的时间，越小出现的越快~
        }else{
            $('.actGotop').fadeOut(300); //火箭淡出的时间，越小消失的越快~
        }
    });
    //火箭动画停留时间，越小消失的越快~
    $('.actGotop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

</script>
</body>
</html>